import React, { Component } from 'react';
import { FlatList, RefreshControl, StyleSheet, View } from 'react-native';
import Toast from 'react-native-easy-toast';
import EventBus from 'react-native-event-bus';
import { connect } from 'react-redux';
import actions from '../action/index';
import NavigationBar from 'react-native-navbar-plus';
import PopularItem from '../common/PopularItem';
import TrendingItem from '../common/TrendingItem';
import { FLAG_STORAGE } from '../expand/dao/DataStore';
import { tabNav } from '../navigator/NavigationDelegate';
import FavoriteDao from '../expand/dao/FavoriteDao';
import NavigationUtil from '../navigator/NavigationUtil';
import EventTypes from '../util/EventTypes';
import FavoriteUtil from '../util/FavoriteUtil';
const THEME_COLOR = 'red'
const TABS = [
  { name: '最热', checked: true },
  { name: '趋势', checked: true },
]

class FavoritePage extends Component {
  render() {
    // console.log(this.props.theme)
    const { theme } = this.props
    let statusBar = {
      backgroundColor: theme.themeColor,
      barStyle: 'light-content'
    }
    let navigationBar = <NavigationBar
      title="收藏"
      statusBar={statusBar}
      style={{ backgroundColor: theme.themeColor }}
    />
    // themeColor: '#2196f3'
    const TabNavigator =
      tabNav({
        Component: FavoriteTabage,
        keys: TABS,
        theme,
      })
    return (
      <View style={styles.container}>
        {navigationBar}
        {TabNavigator}
      </View>
    )
  }
}

const mapFavoriteStateToProps = (state) => ({
  theme: state.theme.theme,
})

export default connect(mapFavoriteStateToProps, null)(FavoritePage);


const pageSize = 10 //设为常量,防止修改
class FavoriteTab extends Component {
  constructor(props) {
    super(props);
    const { tabLabel } = this.props
    this.storeName = tabLabel === '最热' ? FLAG_STORAGE.flag_popular : FLAG_STORAGE.flag_trending
    this.favoriteDao = new FavoriteDao(this.storeName);
  }

  componentDidMount() {
    this.loadData(true);
    EventBus.getInstance().addListener(EventTypes.bottom_tab_select, this.listener = data => {
      if (data.to === 2) {
        this.loadData(false);
      }
    })
  }

  componentWillUnmount() {
    EventBus.getInstance().removeListener(this.listener);
  }

  loadData(isShowLoading) {
    const { onLoadFavoriteData } = this.props;
    onLoadFavoriteData(this.storeName, isShowLoading)
  }

  /**
   * 获取与当前页面相关的数据
   * @returns 
   */

  _store() {
    const { favorite } = this.props;
    let store = favorite[this.storeName]
    if (!store) {
      store = {
        items: [],
        isLoading: false,
        projectModels: [], //要显示的数据
      }
    }
    return store
  }

  onFavorite(item, isFavorite) {
    FavoriteUtil.onFavorite(this.favoriteDao, item, isFavorite, this.storeName);
    if (this.storeName === FLAG_STORAGE.flag_popular) {
      EventBus.getInstance().fireEvent(EventTypes.favorite_changed_popular);
    } else {
      EventBus.getInstance().fireEvent(EventTypes.favoriteChanged_trending);
    }
  }

  renderItem(data) {
    const item = data.item;
    const { theme } = this.props;
    const Item = this.storeName === FLAG_STORAGE.flag_popular ? PopularItem : TrendingItem;
    return <Item
      projectModel={item}
      theme={theme}
      onSelect={(callback) => {
        NavigationUtil.goPage({
          theme,
          projectModel: item,
          flag: this.storeName,
          callback,
        }, 'DetailPage')
      }}
      onFavorite={(item, isFavorite) => this.onFavorite(item, isFavorite)}
    />
  }

  render() {
    let store = this._store();
    if (!store) {
      store = {
        list: [],
        isLoading: false
      }
    }
    return (<View style={styles.container}>
      <FlatList
        data={store.projectModels}
        renderItem={data => this.renderItem(data)}
        keyExtractor={item => '' + item.item.id}
        refreshControl={
          <RefreshControl
            title="Loading"
            titleColor={THEME_COLOR}
            colors={[THEME_COLOR]}
            refreshing={store.isLoading}
            onRefresh={() => this.loadData(true)}
            tintColor={THEME_COLOR}
          />
        }
      />
      <Toast
        ref={'toast'}
        position={'center'}
      />
    </View>);
  }
}

const mapStateToProps = (state) => ({
  favorite: state.favorite,
})
const mapDispatchToProps = (dispatch) => ({
  onLoadFavoriteData: (storeName, isShowLoading) => dispatch(actions.onLoadFavoriteData(storeName, isShowLoading)),
})

const FavoriteTabage = connect(mapStateToProps, mapDispatchToProps)(FavoriteTab)


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  indicatorContainer: {
    alignItems: 'center'
  },
  indicator: {
    color: 'red',
    margin: 10
  }
})